<template>
  <div class="modal-form-container">
    <Alert type="warning" show-icon>{{$t('BeDhpruwzQABp9XZ0iLz4')}}</Alert>
    <vuescroll :ops="ops">
      <Form class="mr10 ml10" ref="info" :model="data" :rules="rules" :label-width="100">
        <FormItem :label="$t('ukexJfHe1YBGx8B9XnGdu')" prop="equipmentid">
          <!-- <Input v-model="data.equipmentid" /> -->
          <Select v-model="data.equipmentid">
            <Option v-for="e in edata" :key="e.id" :value="e.id">{{e.name}}({{e.id}})</Option>
          </Select>
        </FormItem>
        <FormItem :label="$t('HQheW13sBOiRAiJymsNpG')">
          <Upload
            ref="upload"
            accept=".bin"
            name="MmUpload"
            :data="uploadData"
            :before-upload="handleUpload"
            :action="uploadUrl"
            :on-success="uploadSuccess"
            :on-error="uploadError"
          >
            <Button v-if="!data.file" type="primary" icon="ios-cloud-upload-outline">{{$t('e1AiTDoGdkkCrWlG3yw2q')}}</Button>
            <span v-else>{{ data.file.name }}</span>
          </Upload>
        </FormItem>
        <FormItem>
          <Button type="primary" :loading="loadingStatus" @click="save" :disabled="!data.file">{{$t('4PWQ1ofYS95zIASFh6ga0')}}</Button>
          <Button style="margin-left: 8px" @click="close">{{$t('2LFpg56tAgKyBB40xpv5l')}}</Button>
        </FormItem>
      </Form>
    </vuescroll>
  </div>
</template>

<script>
import vuescroll from 'vuescroll'

export default {
  name: 'update_form_info',
  components: {
    vuescroll
  },
  props: {
    data: Object,
    edata: Array,
    status: String
  },
  data () {
    return {
      uploadUrl: this.$config.baseUrl.pro + '/webapi/uploadfile',
      ops: {
        scrollPanel: {
          maxHeight: 500
        }
      },
      equiplist: [],
      // file: null,
      loadingStatus: false,
      rules: {
        equipmentid: [{ required: true, message: this.$t('wXotjLC-TbA_OTLM9dES4'), trigger: 'blur' }]
        // file: [{ required: true, message: this.$t('wXotjLC-TbA_OTLM9dES4'), trigger: 'blur' }],
      }
    }
  },
  computed: {
    uploadData () {
      return {
        Equipmentid: +this.data.equipmentid
      }
    }
  },
  methods: {
    handleUpload (file) {
      if (this.data.file && this.data.file.name == file.name) {
        return true
      } else {
        this.data.file = file
        return false
      }
    },
    uploadSuccess (response, file, fileList) {
      let result = response
      if (typeof response == 'string') {
        result = JSON.parse(response)
      }
      if (result.code == 200) {
        this.$Message.success(this.$t('s-Omf6W6qrKWO6OohowxU'))
      } else {
        this.$Message.error(result.desc)
      }
      this.loadingStatus = false
    },
    uploadError () {
      this.$Message.error(this.$t('GMnoO-lx0QlMDvKDTmcwX'))
      this.loadingStatus = false
    },
    close () {
      this.$emit('close')
    },
    save () {
      this.$refs.info.validate(valid => {
        if (valid && this.data.file) {
          this.loadingStatus = true
          this.$refs.upload.upload(this.data.file)
        }
      })
    }
  }
}
</script>
